import React from 'react';
import { Select, DatePicker } from 'antd';
import axios from 'axios';
import moment from 'moment';
import { apiPrefix } from 'shared/api';
import './index.less';


const { Option } = Select;
const dateFormat = 'YYYY/MM/DD';


export default class Inquiey extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      newContractManage: {},
      categories: [],
      periods: [],
    };
  }
  componentDidMount() {
    const api2 = `${apiPrefix}api/v1/contract/categories`;
    const api3 = `${apiPrefix}api/v1/contract/periods`;
    axios.get(api2)
      .then((response) => {
        this.setState({ categories: response.data.data });
      });
    axios.get(api3)
      .then((response) => {
        this.setState({ periods: response.data.data });
      });
  }
  handlOnChange=(value, key) => {
    const { newContractManage } = this.state;
    newContractManage[key] = value;
    this.setState({ newContractManage: { ...this.state.newContractManage } });
  }


  render() {

    const categoriesList = this.state.categories;
    const periodsList = this.state.periods;

    return (
      <div className="inquiey">
        <div>
          <div className="inquiryInput">
            <div>
              <span>姓名</span>
              <input
                type="text"
                onChange={e => this.handlOnChange(e.target.value, 'user_name')}
                placeholder="请输入姓名"
              />
            </div>
            <div>
              <span>员工编号</span>
              <input
                type="text"
                onChange={e => this.handlOnChange(e.target.value, 'user_erp_id')}
                placeholder="请输入员工编号"
              />
            </div>
            <div>
              <span>合同编号</span>
              <input
                type="text"
                onChange={e => this.handlOnChange(e.target.value, 'number')}
                placeholder="请输入合同编号"
              />
            </div>
            <div>
              <span> 选择合同期限</span>
              <Select
                showSearch
                className="select"
                placeholder="选择合同期限"
                onChange={value => this.handlOnChange(value, 'period_id')}
                optionFilterProp="children"
                filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
              >
                {
                periodsList.map((value, index) => (
                  <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
              </Select>
            </div>
            <div>
              <span>签约开始时间</span>
              <DatePicker
                value={!this.state.newContractManage.exp_date_first ? null : moment(this.state.newContractManage.exp_date_first, dateFormat)}
                format={dateFormat}
                onChange={(date, dateString) => this.handlOnChange(dateString, 'exp_date_first')}
                placeholder="签约开始时间"
              />
            </div>
            <div>
              <span>签约结束时间</span>
              <DatePicker
                value={!this.state.newContractManage.exp_date_last ? null : moment(this.state.newContractManage.exp_date_last, dateFormat)}
                format={dateFormat}
                onChange={(date, dateString) => this.handlOnChange(dateString, 'exp_date_last')}
                placeholder="签约结束时间"
              />
            </div>
            <div>
              <span> 选择合同类型</span>
              <Select
                showSearch
                className="select"
                placeholder="选择合同类型"
                onChange={value => this.handlOnChange(value, 'category_id')}
                optionFilterProp="children"
                filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
              >
                {
                categoriesList.map((value, index) => (
                  <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
              </Select>
            </div>
            <div>
              <span>到期开始时间</span>
              <DatePicker
                value={!this.state.newContractManage.mfd_date_first ? null : moment(this.state.newContractManage.mfd_date_first, dateFormat)}
                format={dateFormat}
                onChange={(date, dateString) => this.handlOnChange(dateString, 'mfd_date_first')}
                placeholder="到期开始时间"
              />
            </div>
            <div>
              <span>到期结束时间</span>
              <DatePicker
                value={!this.state.newContractManage.mfd_date_last ? null : moment(this.state.newContractManage.mfd_date_last, dateFormat)}
                format={dateFormat}
                onChange={(date, dateString) => this.handlOnChange(dateString, 'mfd_date_last')}
                placeholder="结束开始时间"
              />
            </div>
            <div>
              <button className="queryButton" onClick={() => this.props.Query(this.state.newContractManage)}>查询</button>
              <button className="clearButton" onClick={() => this.props.clearInput}>清空查条件</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
